<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { usePlayerStore } from '@/stores/player'
import { audioEffects } from '@/config/audioEffects'

const emit = defineEmits(['close'])
const playerStore = usePlayerStore()

const effects = audioEffects

const currentEffect = ref('normal')

const applyEffect = async (effectId: string) => {
  try {
    // 如果没有正在播放的音乐，不应用音效
    if (!playerStore.currentMusic.id) {
      return
    }

    // 确保音频上下文已初始化
    if (!playerStore.audioContext || !playerStore.audioSource) {
      // 如果音频正在播放，需要先暂停
      const wasPlaying = playerStore.isPlaying
      if (wasPlaying) {
        await playerStore.audio?.pause()
      }

      await playerStore.initAudioContext()

      // 如果之前在播放，则恢复播放
      if (wasPlaying && playerStore.audio) {
        await playerStore.audio.play()
      }
    }

    currentEffect.value = effectId
    await playerStore.setAudioEffect(effectId)
  } catch (error) {
    console.error('应用音效失败:', error)
  }
}

onMounted(() => {
  // 同步当前音效状态
  currentEffect.value = playerStore.currentEffect || 'normal'
})
</script>

<template>
  <div class="effect-wrapper" @click.self="$emit('close')">
    <div class="effect-container">
      <div class="effect-header">
        <h3>音效设置</h3>
        <button class="close-btn" @click="$emit('close')">×</button>
      </div>
      
      <div class="effect-content">
        <div 
          v-for="effect in effects" 
          :key="effect.id"
          class="effect-item"
          :class="{ 
            active: currentEffect === effect.id,
            disabled: !playerStore.currentMusic.id 
          }"
          @click="applyEffect(effect.id)"
        >
          <div class="effect-info">
            <div class="effect-name">{{ effect.name }}</div>
            <div class="effect-desc">{{ effect.description }}</div>
          </div>
          <div class="effect-status" v-if="currentEffect === effect.id">
            <span class="active-icon">✓</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.effect-wrapper {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 300px;
  background-color: transparent;
  display: flex;
  justify-content: flex-end;
  z-index: 1000;
}

.effect-container {
  width: 100%;
  background-color: var(--bgc-color-2);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}

.effect-header {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);

  h3 {
    margin: 0;
    font-size: 16px;
    color: var(--primary-color);
  }

  .close-btn {
    background: none;
    border: none;
    color: var(--secondary-color);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;

    &:hover {
      color: var(--primary-color);
    }
  }
}

.effect-content {
  padding: 8px 0;

  .effect-item {
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background-color: rgba(var(--theme-color), 0.1);
    }

    &.active {
      background-color: rgba(var(--theme-color), 0.15);
      
      .effect-name {
        color: var(--theme-color);
      }
    }

    .effect-info {
      .effect-name {
        color: var(--secondary-color);
        font-size: 14px;
        margin-bottom: 4px;
      }

      .effect-desc {
        color: var(--secondary-color);
        font-size: 12px;
        opacity: 0.7;
      }
    }

    .effect-status {
      .active-icon {
        color: var(--theme-color);
        font-size: 16px;
      }
    }

    &.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      
      &:hover {
        background-color: transparent;
      }
    }
  }
}

@media (max-width: 768px) {
  .effect-wrapper {
    right: 0;
    width: 100%;
    max-width: 300px;
    margin: 0 10px;
  }
}
</style> 